<!-- 商品详情页 -->
<template>
  <div class="detail">
    <!-- 详情页头部 -->
    <div class="detail-header" ref="header" :style="'background:rgba(255,255,255,'+bgOpacity+')'">
      <a href="javascript:;" onclick="window.history.back()" class="iconfont icon-jiantou3"></a>
      <div class="detail-tabs">
        <ul>
          <li
            :class="tabIndex==index?'active':''"
            v-for="(detailTab,index) in detailTabs"
            :key="index"
            @click="changeDetailTabs(index)"
          >{{detailTab}}</li>
        </ul>
      </div>
      <a href="javascript:;" class="iconfont icon-shoucang1"></a>
    </div>
    <!-- 商品部分 -->
    <div id="wrap0">
      <!-- 详情页轮播图 -->
      <div class="detail-swipe">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="detailData in detailDatas.gallery_list" :key="detailData.img_id">
            <img :src="detailData.img_url" alt>
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <!-- 详情页轮播图结束 -->
      <!-- 内容 -->
      <div class="detail-content">
        <div class="price-wrap">
          <div class="price-wrap-left">
            <div class="price">{{detailDatas.shop_price}}</div>
            <div class="dprice">{{detailDatas.market_price}}</div>
          </div>
          <div class="share" @click="showPopupVisibleShare">
            <i class="iconfont icon-fenxiang"></i>
          </div>
        </div>
        <div class="title">{{detailDatas.goods_name}}</div>
      </div>

      <div class="select-wrap">
        <div class="seelect-item">
          <div class="item-title">
            <strong>优惠</strong>
            <span>10</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-jiantou1"></i>
          </div>
        </div>
      </div>

      <div class="select-wrap">
        <div class="seelect-item">
          <div class="item-title">
            <strong>已选</strong>
            <span>{{buyNum}}个</span>
          </div>
          <div class="icon" @click="showProductMaskFn">
            <i class="iconfont icon-jiantou1"></i>
          </div>
        </div>
        <div class="seelect-item">
          <div class="item-title">
            <strong>送至</strong>
            <span>{{province}}-{{city}}-{{county}}</span>
          </div>
          <div class="icon" @click="showPopupVisibleFn">
            <i class="iconfont icon-jiantou1"></i>
          </div>
        </div>
        <div class="seelect-item">
          <div class="item-title">
            <strong>运费</strong>
            <span>10</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-jiantou1"></i>
          </div>
        </div>
        <div class="seelect-item">
          <div class="item-title">
            <strong>服务</strong>
            <span>10</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-jiantou1"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐部分 -->
    <div id="wrap1">
      <h2>推荐</h2>
      <div style="height:100rem; background:pink"></div>
    </div>
    <!-- 详情部分 -->
    <div id="wrap2">
      <h2>详情</h2>
      <div style="height:130rem; background:green"></div>
    </div>

    <!-- 产品已选蒙版 -->
    <div class="mask" v-if="showProductMask"></div>
    <transition name="hg">
      <div class="mask-product" v-if="showProductMask">
        <div class="product">
          <div class="product-img">
            <img :src="detailDatas.goods_thumb" alt>
          </div>
          <div class="product-content">
            <div class="title">{{detailDatas.goods_name}}</div>
            <div class="price">{{detailDatas.shop_price}}</div>
          </div>
          <div class="close" @click="hideProductMaskFn">
            <i class="iconfont icon-round_delete"></i>
          </div>
        </div>

        <div class="num-wrap">
          <div class="num-title">数量</div>
          <div class="num">
            <a href="javascript:;" @click="buyNum>1?buyNum--:1">-</a>
            <input type="text" v-model="buyNum">
            <a href="javascript:;" @click="buyNum++">+</a>
          </div>
        </div>

        <div class="btn-wrap">
          <div class="addcart" @click="addCartFn">加入购物车</div>
          <div class="tobuy">立即购买</div>
        </div>
      </div>
    </transition>

    <!-- 选择地址 -->
    <div class="address">
      <mt-popup v-model="popupVisible" position="bottom">
        <div class="title">
          <h2>配送至</h2>
          <i class="iconfont icon-round_delete" @click="hidePopupVisibleFn"></i>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </mt-popup>
    </div>
    <!-- 生成海报组件 -->
    <CreatePoster v-if="showHidePoster" @closePoster="hidePosterFn" :posterDatas="posterDatas"/>
    <!-- 点击分享出现的动画 -->
    <div class="share-wrap">
      <mt-popup v-model="popupVisibleShare" position="bottom">
        <div class="send" v-if="isWeixin">发送给好友</div>
        <div class="img" @click="showCreatePosterFn">生成海报</div>
      </mt-popup>
    </div>

    <!-- 详情页底部 -->
    <div class="detail-footer">
      <div>
        <i class="iconfont icon-kefu1"></i>
        <span>客服</span>
      </div>
      <div @click="toCartPage">
        <i class="iconfont icon-gouwuche"></i>
        <span>购物车</span>
        <span class="num" v-if="cartNum>0">{{cartNum}}</span>
      </div>
      <div class="add" @click="addCartFn">加入购物车</div>
      <div class="buy">立即购买</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

//npm i --save lodash.debounce  防抖函数
import debounce from "lodash.debounce"; //
//debounce(callback,delay)
// 引入城市数据
import citys from "@/data/city.json";
// console.log(citys);
// 引入判断浏览器的模块
import { isWeixin } from "@/utils/isweixin.js";
//引入生成海报组件
import CreatePoster from "./components/CreatePoster.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    CreatePoster
  },
  data() {
    //这里存放数据
    return {
      detailTabs: ["商品", "推荐", "详情"],
      tabIndex: 0,
      bgOpacity: 0,
      flag: false,
      showProductMask: false,
      buyNum: 1,
      popupVisible: false,
      popupVisibleShare: false,
      showHidePoster: false,
      isWeixin: isWeixin(),
      slots: [
        {
          flex: 1,
          values: Object.keys(citys),
          className: "slot1",
          textAlign: "right"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: ["北京"],
          className: "slot3",
          textAlign: "left"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: ["东城区"],
          className: "slot5",
          textAlign: "left"
        }
      ],
      province: "", //省
      city: "", //市
      county: "" //区
    };
  },
  computed: {
    detailDatas() {
      return this.$store.state.goodsDetailDatas;
    },
    cartNum() {
      var num = 0;
      this.$store.state.cartDatas.map(item => {
        num += item.value;
      });
      return num;
    },
    posterDatas() {
      return this.$store.state.posterDatas;
    }
  },
  methods: {
    //点击头部tab
    changeDetailTabs(index) {
      this.tabIndex = index;
      let wrap = document.querySelector("#wrap" + index);
      let top =
        wrap.offsetTop - window.scrollY - this.$refs.header.offsetHeight;
      window.scrollBy({ top: top, left: 0, behavior: "smooth" });
      this.flag = true;
    },
    //debounce(callback,delay) //防抖函数
    scrollPage: debounce(function() {
      let headerHeight = this.$refs.header.offsetHeight; //获取头部的高度

      // 让头部的背景显示
      let oTop = document.documentElement.scrollTop; //获取滚动条滚动的距离
      var opacity = oTop / 100;
      if (oTop > 100) {
        if (opacity >= 1) {
          opacity = 1;
        }
        this.bgOpacity = opacity;
      } else {
        this.bgOpacity = 0;
      }
      //获取每一部分元素
      //id="wrap0/wrap1/wrap2"
      console.log(document.getElementById("wrap0").offsetHeight);

      let wrapArr = [];
      wrapArr.push(document.getElementById("wrap0"));
      wrapArr.push(document.getElementById("wrap1"));
      wrapArr.push(document.getElementById("wrap2"));
      console.log(wrapArr);
      // console.log(window.scrollY);
      let { scrollY } = window; //解构赋值-对象的解构  let scrollY=window.scrollY

      console.log(scrollY);
      //变量数组的方法
      // for
      // for in
      // for of
      // forEach()
      // map()
      // filter()
      // every()
      // some()
      // find()

      //reduce()

      wrapArr.reduce((sumWrap, currentWrap, index) => {
        //sumWrap 数组的和
        //currentWrap  当前的
        //index 索引
        // console.log(sumWrap);
        // console.log(index);
        // console.log(currentWrap.offsetHeight);
        if (
          !document.getElementById("wrap0") &&
          !document.getElementById("wrap1") &&
          !document.getElementById("wrap2")
        ) {
          return;
        }
        if (sumWrap) {
          return sumWrap;
        }
        if (this.flag) {
          return;
        }
        if (
          scrollY + headerHeight <=
          currentWrap.offsetTop + currentWrap.offsetHeight
        ) {
          this.tabIndex = index;
          sumWrap = true;
          this.flag = false;
        }
        return sumWrap;
      }, 0);
    }, 500),
    showProductMaskFn() {
      this.showProductMask = true;
    },
    hideProductMaskFn() {
      this.showProductMask = false;
    },
    showPopupVisibleFn() {
      this.popupVisible = true;
    },
    hidePopupVisibleFn() {
      this.popupVisible = false;
    },
    onValuesChange(picker, values) {
      // console.log(picker);
      // console.log(values); //["河北", "唐山", "东城区"]
      // console.log(citys[values[0]][values[1]]);
      //setSlotValues(index, values)：设定给定 slot 的备选值数组
      picker.setSlotValues(1, Object.keys(citys[values[0]]));
      picker.setSlotValues(2, citys[values[0]][values[1]]);
      this.province = values[0];
      this.city = values[1];
      this.county = values[2];
    },
    addCartFn() {
      //加入购物车
      this.showProductMask = false;
      console.log(this.$store.state.goodsDetailDatas);
      //打开项目的时候购物车为空，第一次添加购物车，直接在购物车列表添加数据
      //购物车不为空
      //1、先判断购物车中是否存在当前要添加的产品
      //如果要添加的产品在购物车中存在，直接将购物车的数量++
      //如果要添加的产品在购物车中不存在，直接在购物车列表添加数据
      // {
      //   goods_id:"商品的id",
      //   goods_name:"商品的名称",
      //   shop_price:"商品的价格",
      //   goods_thumb:"商品的缩略图",
      //   value:"商品的数量",
      //   isSelect:"是否选中"
      // }
      //当前要添加购物车的数据
      let currentDetailData = this.$store.state.goodsDetailDatas;
      var isCart = this.$store.state.cartDatas.find(item => {
        if (item.goods_id == currentDetailData.goods_id) {
          //如果条件成立说明购物车中存在当前数据
          item.value = item.value + this.buyNum;

          return item.goods_id == currentDetailData.goods_id;
        }
      });
      console.log(isCart);

      if (!isCart) {
        var addCartDatas = {
          goods_id: currentDetailData.goods_id,
          goods_name: currentDetailData.goods_name,
          shop_price: currentDetailData.shop_price,
          goods_thumb: currentDetailData.goods_thumb,
          value: this.buyNum,
          isSelect: true
        };
      }

      this.$store.commit("changeCartDatas", addCartDatas);
    },
    toCartPage() {
      //编程式导航
      this.$router.push("/cart");
    },
    //点击分享按钮
    showPopupVisibleShare() {
      this.popupVisibleShare = true;
    },
    //点击生成海报按钮
    showCreatePosterFn() {
      this.showHidePoster = true; //显示生成海报组件
      this.popupVisibleShare = false; //关闭蒙版
    },
    hidePosterFn(data) {
      this.showHidePoster = data;
    }
  },
  mounted() {
    console.log(this.$route.params);
    document.addEventListener("scroll", this.scrollPage, false);
    // this.$store.dispatch("actions中定义的方法");
    this.$store.dispatch("actChangeGoodsDetailDatas", {
      goods_id: this.$route.params.goods_id
    });
  },
  destroyed() {
    document.removeEventListener("scroll", this.scrollPage, false);
  }
};
</script>
<style lang="less">
.hg-enter,
.hg-leave-to {
  transform: translateY(100%);
}

.hg-enter-active,
.hg-leave-active {
  transition: all 0.3s linear;
}

.detail {
  .detail-header {
    width: 100%;
    height: 4.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    text-align: center;
    a {
      width: 10%;
      display: block;
    }
    .detail-tabs {
      width: 80%;
      ul {
        display: flex;
        li {
          flex: 1;
          font-size: 1.6rem;
        }
        .active {
          color: #f55;
          font-weight: bold;
        }
      }
    }
  }
  .detail-swipe {
    width: 100%;
    height: 37.5rem;
    img {
      width: 100%;
      height: 37.5rem;
    }
  }
  .detail-content {
    width: 100%;
    margin: 1rem;
    width: calc(100% - 2rem);
    .price-wrap {
      width: 100%;
      display: flex;
      height: 4.4rem;
      line-height: 4.4rem;
      justify-content: space-between;
      .price-wrap-left {
        display: flex;
        > div {
          &::before {
            content: "￥";
          }
        }
        .price {
          font-size: 2rem;
          color: #f55;
        }
        .dprice {
          color: #666;
          text-decoration: line-through;
          margin-left: 2rem;
        }
      }
      .share {
        i {
          font-size: 2rem;
        }
      }
    }
    .title {
      font-size: 1.4rem;
      line-height: 2.2rem;
      font-weight: bold;
    }
  }
  .select-wrap {
    background: #fff;
    border-radius: 1rem;
    margin: 1rem 0;
    .seelect-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 5rem;
      align-items: center;
      .item-title {
        font-size: 1.4rem;
        margin-left: 1rem;
        span {
          margin-left: 1rem;
        }
      }
      .icon {
        i {
          font-size: 2rem;
          margin-right: 1rem;
        }
      }
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);
  }
  .mask-product {
    height: 28rem;
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    .product {
      width: 100%;
      margin: 0 1rem;
      width: calc(100% - 2rem);
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 13rem;
      img {
        width: 9rem;
        height: 9rem;
      }
      .title {
        height: 4rem;
        line-height: 2rem;
        overflow: hidden;
        font-size: 1.4rem;
        margin: 0 1rem;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .price {
        font-size: 2rem;
        margin-left: 1rem;
        color: #f55;
        margin-top: 1rem;
      }
      .close {
        position: absolute;
        top: 1rem;
        right: 1rem;
      }
    }
    .num-wrap {
      width: 100%;
      height: 4.4rem;
      background: pink;
      display: flex;
      margin-top: 2rem;
      justify-content: space-between;
      align-items: center;
      .num-title {
        margin-left: 1rem;
        font-size: 1.4rem;
      }
      .num {
        display: flex;
        a {
          display: block;
          width: 4.4rem;
          height: 4.4rem;
          font-size: 1.8rem;
          text-align: center;
          line-height: 4.4rem;
          background: #ccc;
        }
        input {
          width: 8rem;
          text-align: center;
        }
      }
    }
    .btn-wrap {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 4.4rem;
      position: absolute;
      bottom: 0.5rem;
      left: 0;
      > div {
        flex: 1;
        text-align: center;
        line-height: 4.4rem;
        font-size: 1.6rem;
        background: #ccc;
        margin: 0 1rem;
        border-radius: 2rem;
        color: #fff;
      }
      .addcart {
        background: #ffc707;
      }
      .tobuy {
        background: #f55;
      }
    }
  }
  .address {
    .mint-popup {
      width: 100%;
      .title {
        height: 4.4rem;
        position: relative;
        h2 {
          width: 100%;
          position: absolute;
          top: 0;
          height: 4.4rem;
          line-height: 4.4rem;
          font-size: 1.6rem;
          text-align: center;
        }
        i {
          position: absolute;
          width: 4.4rem;
          height: 4.4rem;
          right: 0;
          top: 0;
          font-size: 2rem;
          text-align: center;
          line-height: 4.4rem;
        }
      }
    }
  }
  .detail-footer {
    width: 100%;
    height: 4.9rem;
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #ccc;
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center;
      position: relative;
      i {
        font-size: 2rem;
      }
      .num {
        position: absolute;
        height: 2rem;
        min-width: 2rem;
        background: #f55;
        color: #fff;
        line-height: 2rem;
        text-align: center;
        top: -0.5rem;
        right: 0.5rem;
        border-radius: 1rem;
      }
    }
    .add {
      background: #ffc707;
      color: #fff;
      font-size: 1.6rem;
      height: 4.9rem;
      line-height: 4.9rem;
      flex: 2;
    }
    .buy {
      background: #f55;
      color: #fff;
      font-size: 1.6rem;
      height: 4.9rem;
      line-height: 4.9rem;
      flex: 2;
    }
  }
  .share-wrap {
    .mint-popup {
      width: 100%;
      height: 5rem;
      height: 5rem;
      width: 100%;
      display: flex;
      > div {
        flex: 1;
        line-height: 5rem;
        text-align: center;
        font-size: 1.4rem;
      }
      .send {
        background: #ffc707;
        color: #fff;
      }
      .img {
        background: #f55;
        color: #fff;
      }
    }
  }
}
</style>